<template>
  <div>
    <div class="tempxyz tableHeight">
      <CCard>
        <CCardHeader class="header-wraper">
          <div class="header-left-titleWraper">
            <strong class="title">任务列表</strong>
          </div>
        </CCardHeader>

        <!-- <CCardHeader>
                    <strong class="title">任务列表</strong>
                </CCardHeader> -->
        <CCardBody class="card-body">
          <vxe-table
            border
            resizable
            stripe
            :tree-config="{ children: 'children' }"
            :expand-config="{ lazy: true, loadMethod: loadContentMethod }"
            :data="tableData"
          >
            <vxe-table-column type="expand" width="80">
              <template #content="{ row }">
                <template>
                  <!--主任务-->
                  <vxe-table border resizable stripe :data="row.children">
                    <vxe-table-column
                      v-for="item in childCols"
                      :key="item.key"
                      :field="item.field"
                      :title="item.title"
                      :align="item.align"
                      :type="item.type"
                      :width="item.width"
                    ></vxe-table-column>
                    <!--                                        <vxe-table-column field="show-level" title="优先级"  align="center" width="80" >
                                          <template #default="{ row }">
                                            <div v-if="row.status == 8 || row.status == 1">
                                              <CSelect
                                                  horizontal
                                                  :disabled="false"
                                                  :options="priorityShowList"
                                                  :value.sync="row.priority"
                                                  class="prioritySelect onButton selectStyle"
                                                  @change="selectPriorityChange($event, row)"
                                              ></CSelect>
                                            </div>
                                            <div v-else>{{ row.priority == 0 ? "普通" : "优先" }}</div>
                                          </template>
                                        </vxe-table-column>-->
                    <vxe-table-column
                      field="status"
                      title="状态"
                      align="center"
                      width="80"
                    >
                      <template #default="{ row }">
                        <CButton
                          v-if="row.status == 1 && row.isHuman == 1"
                          :pressed="false"
                          class="stastusBtn executing onButton"
                          >执行中</CButton
                        >
                        <CButton
                          v-if="row.status == 1 && row.isHuman == 0"
                          :pressed="false"
                          class="stastusBtn executing onButton"
                          >执行中</CButton
                        >
                        <CButton
                          v-if="row.status == 2"
                          class="stastusBtn pause onButton"
                          :pressed="false"
                          >暂停</CButton
                        >
                        <CButton
                          v-if="row.status == 3"
                          style="color: #f9b115"
                          class="onButton"
                          :pressed="false"
                          >删除</CButton
                        >
                        <CButton
                          v-if="row.status == 4"
                          class="stastusBtn success onButton"
                          :pressed="false"
                          >完成</CButton
                        >
                        <CButton
                          :pressed="false"
                          v-if="row.status == 5"
                          class="stastusBtn success onButton"
                          >完成</CButton
                        >
                        <CButton
                          v-if="row.status == 6"
                          style="color: #f9b115"
                          class="onButton"
                          :pressed="false"
                          >超时</CButton
                        >
                        <CButton
                          v-if="row.status == 7"
                          class="stastusBtn stop onButton"
                          :pressed="false"
                          >停止</CButton
                        >
                        <CButton
                          v-if="row.status === 8"
                          class="stastusBtn pending onButton"
                          :pressed="false"
                          >待执行</CButton
                        >
                      </template>
                    </vxe-table-column>
                    <vxe-table-column
                      field="status "
                      title="操作"
                      align="center"
                      width="360"
                    >
                      <template #default="{ row }">
                        <!--查看-->
                        <CButton
                          title="查看子任务"
                          variant="outline"
                          class="textBtnStyle onButton system-btn-style"
                          @click="getInfo(row)"
                        >
                          查看
                        </CButton>

                        <!--详情-->
                        <CButton
                          v-if="row.status != 3"
                          title="详情"
                          variant="outline"
                          class="textBtnStyle onButton system-btn-style"
                          @click="getTaskDetails(row)"
                        >
                          详情
                        </CButton>
                        <CButton
                          :disabled="true"
                          v-if="row.status == 3"
                          title="详情"
                          variant="outline"
                          class="disableTextBtnStyle onButton"
                          @click="() => {}"
                        >
                          详情
                        </CButton>

                        <!--下载-->
                        <CButton
                          title="下载"
                          v-if="row.status != 2 && row.status != 8"
                          variant="outline"
                          class="textBtnStyle onButton system-btn-style"
                          @click="downloadTaskResult(row)"
                        >
                          下载
                        </CButton>
                        <CButton
                          :disabled="true"
                          title="下载"
                          v-if="row.status == 2 || row.status == 8"
                          variant="outline"
                          class="disableTextBtnStyle onButton"
                        >
                          下载
                        </CButton>

                        <!--暂停-->
                        <CButton
                          v-if="row.status == 1 || row.status == 8"
                          title="暂停"
                          variant="outline"
                          class="textBtnStyle onButton system-btn-style"
                          @click="pause(row)"
                          data-permission="Btn_AllTask_Del"
                        >
                          暂停
                        </CButton>
                        <CButton
                          :disabled="true"
                          v-if="
                            row.status != 1 &&
                            row.status != 2 &&
                            row.status != 8
                          "
                          title="暂停"
                          variant="outline"
                          class="disableTextBtnStyle onButton"
                          @click="() => {}"
                          data-permission="Btn_AllTask_Del"
                        >
                          暂停
                        </CButton>

                        <!--恢复-->
                        <CButton
                          :disabled="row.status == 2 ? false : true"
                          title="恢复"
                          v-if="row.status == 2"
                          variant="outline"
                          class="textBtnStyle onButton system-btn-style"
                          @click="restore(row)"
                          data-permission="Btn_AllTask_Retore"
                        >
                          恢复
                        </CButton>

                        <!--重启-->
                        <CButton
                          :disabled="row.status == 7 ? false : true"
                          title="重启"
                          v-if="row.status == 7"
                          variant="outline"
                          class="textBtnStyle onButton system-btn-style"
                          @click="reStart(row)"
                          data-permission="Btn_AllTask_Restar"
                        >
                          重启
                        </CButton>
                        <!--终止-->
                        <CButton
                          :disabled="true"
                          title="终止"
                          v-if="
                            row.status != 1 &&
                            row.status != 7 &&
                            row.status != 8 &&
                            row.status != 2
                          "
                          variant="outline"
                          class="disableTextBtnStyle onButton"
                          @click="() => {}"
                        >
                          终止
                        </CButton>
                        <CButton
                          title="终止"
                          v-if="
                            row.status == 1 ||
                            row.status == 8 ||
                            row.status == 2
                          "
                          variant="outline"
                          class="textBtnStyle onButton system-btn-style"
                          @click="stop(row)"
                          data-permission="Btn_AllTask_Restar"
                        >
                          终止
                        </CButton>

                        <CButton
                          v-if="row.status != 3"
                          title="删除"
                          variant="outline"
                          class="textBtnStyle onButton system-btn-style"
                          @click="del(row)"
                          data-permission="Btn_QuaCheck_Del"
                        >
                          删除
                        </CButton>
                      </template>
                    </vxe-table-column>
                  </vxe-table>
                </template>
              </template>
            </vxe-table-column>
            <vxe-table-column
              v-for="item in getColumns"
              :key="item.key"
              :field="item.key"
              :title="item.title"
              :align="item.align"
              :type="item.type"
              :width="item.width"
            ></vxe-table-column>
          </vxe-table>
          <!--   <vxe-pager
                            border
                            size="medium"
                            :loading="loading2"
                            :current-page="tablePage2.currentPage"
                            :page-size="tablePage2.pageSize"
                            :total="tablePage2.totalResult"
                            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                            @page-change="handlePageChange2">
                    </vxe-pager>
-->
        </CCardBody>
      </CCard>
    </div>

    <CModal
      :show.sync="prioShow"
      :closeOnBackdrop="false"
      title="修改优先级"
      centered
    >
      <template #header class="taskExecuteHeader">
        <img
          src="@/assets/icons/modifyred.png"
          alt
          style="width: 43px; height: 43px; margin-top: -4px"
        />
        <p class="delKuangShow">修改优先级</p>
      </template>
      <div class="delKuangBody">
        <label
          style="margin-right: 41px; display: inline-block; margin-top: 6px"
          >优先级</label
        >
        <RadioGroup
          v-model="priorityData.priority"
          class="m_radio_group"
          style="margin-top: 6px"
        >
          <Radio label="0">普通</Radio>
          <Radio label="1">优先</Radio>
        </RadioGroup>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="prioCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="prioOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </CModal>
    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除主任务"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除主任务</span>
      </p>
      <div class="delKuangBody">
        <p>删除主任务时与主任务相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="pauseShow"
      draggable
      scrollable
      title="暂停任务"
      :styles="modalStyle"
    >
      <p>确认要暂停任务吗？</p>
      <template #footer class="footerBtns">
        <CButton @click="pauseCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="pauseOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="restoreShow"
      draggable
      scrollable
      title="恢复任务"
      :styles="modalStyle"
    >
      <p>确认要恢复任务吗？</p>
      <template #footer class="footerBtns">
        <CButton @click="restoreCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="restoreOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="restartShow"
      draggable
      scrollable
      title="重启任务"
      :styles="modalStyle"
    >
      <p>确认要重启任务吗？</p>
      <template #footer class="footerBtns">
        <CButton @click="reStartCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="reStartOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="retryShow"
      draggable
      scrollable
      title="重试任务"
      :styles="modalStyle"
    >
      <p>确认要重试任务吗？</p>
      <template #footer class="footerBtns">
        <CButton @click="retryCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="retryOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="stopShow"
      draggable
      scrollable
      title="终止任务"
      :styles="modalStyle"
    >
      <p>确认要终止任务吗？</p>
      <template #footer class="footerBtns">
        <CButton @click="stopCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="stopOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <Modal
      v-model="showdownLoad"
      draggable
      scrollable
      title="下载列表"
      :styles="modalStyle"
      class="downLoadModal"
      footer-hide
    >
      <!-- 复选 : show-checkbox -->
      <Tree
        @on-select-change="selectTree"
        :data="treeData"
        ref="tree"
        class="demo-tree-render"
        style="overflow: auto"
      ></Tree>
    </Modal>

    <div>
      <QualityReport
        ref="refQcReportModal"
        v-show="qcReportModal"
        :modalShow="qcReportModal"
        @closed="qcReportModalClosed"
      ></QualityReport>
    </div>
  </div>
</template>

<script>
import QualityReport from "../qualityCheck/qualityReport";
import TableList from "../../template/table/TableList";
export default {
  name: "optimizationTask",
  components: { QualityReport },
  data() {
    return {
      getColumns: [
        { type: "seq", title: "序号", width: 60, align: "center" },
        {
          title: "名称",
          key: "name",
          className: "centerText",
          align: "center",
        },
        {
          title: "创建日期",
          key: "createTime",
          className: "centerText",
          align: "center",
        },
        {
          title: "更新日期",
          key: "updateTime",
          className: "centerText",
          align: "center",
        },
      ],
      childCols: [
        { type: "seq", title: "序号", width: 60, align: "center" },
        {
          field: "groupTaskName",
          title: "任务名称",
          align: "left",
          minWidth: 250,
        },
        {
          field: "taskSourceName",
          title: "任务来源",
          align: "center",
          width: "100",
        },
        {
          field: "taskOwner",
          title: "用户名",
          align: "center",
          width: "100",
        },
        {
          field: "createTime",
          title: "开始时间",
          align: "center",
          width: "160",
        },
        {
          field: "endTime",
          title: "结束时间",
          align: "center",
          width: "160",
        },
        {
          field: "show_imageNumber",
          title: "景数(S/F)",
          align: "center",
          width: "120",
        },
      ],
      tableData: [],
      crountTaskBuild: {},

      userName: "",
      modalStyle: { top: "340px" },
      qcReportModal: false,
      showPop: false,
      pauseShow: false,
      restoreShow: false,
      restartShow: false,
      retryShow: false,
      stopShow: false,
      delShow: false,
      priorityShowList: [
        {
          label: "优先",
          value: 1,
        },
        {
          label: "普通",
          value: 0,
        },
      ],
      clickId: "",
      loading: true,

      priority: "",

      groupName: "",
      changestatus: false,
      startTime: "",
      endTime: "",
      prioShow: false, // 修改优先级弹窗
      priorityData: {
        priority: "0",
        startWorkflowId: "",
      },
      productpath: "",
      showdownLoad: false,
      treeData: [],
      tableHeight: 0,
      setIntervalTime: "",
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    loadContentMethod({ row }) {
      let that = this;
      that.crountTaskBuild = row;
      return new Promise((resolve) => {
        that.http
          .get(this.$api.dataOptimizationApi.optimization, { taskSetId: row.id })
          .then((res) => {
            if (res.data.success) {
              that.$set(row, "children", res.data.data.dataList);
              resolve();
              return;
            } else {
              that.$Message.error(res.data.message);
              resolve();
            }
          })
          .catch((err) => {
            that.$Message.error(err.data.message);
            resolve();
          });
      });
    },
    getTableData() {
      let that = this;
      that.http
        .get(this.$api.manageApi.getAllTaskSet, {
          userName: window.sessionStorage.getItem("user"),
        })
        .then((res) => {
          if (res.data.success) {
            that.tableData = res.data.data.dataList;
          } else {
            that.$Message.error(res.data.message);
          }
        })
        .catch((err) => {
          that.$Message.error(err.data.message);
        });
    },
    getTableHeight(a, b, c, d) {
      this.tableHeight = parseInt(d) - 20 - 51 - 52 - 77 - 120;
    },
    qcReportModalClosed() {
      // this.qcReportModal = false;
      this.$refs.refQcReportModal.openOrClose();
    },
    // 下载产品
    // downloadTaskResult(item) {
    //   if (item.taskType === 2) {
    //     let _this = this;
    //     let path = this.$api.taskManageApi.taskDetailResult + item.id;
    //     let params = {
    //       productType: 2,
    //     };
    //     this.http.get(path, params).then((res) => {
    //       if (res.data.code == 0) {
    //         if (res.data.data.length < 1) {
    //           this.$Message.warning("暂无影像产品数据");
    //         } else {
    //           _this.showdownLoad = true;
    //           _this.treeData = _this.getNewTreeData(res.data.data);
    //         }
    //       } else {
    //         this.$Message.error(res.data.message);
    //       }
    //     });
    //   } else {
    //     //质量检查详情
    //     this.$refs.refQcReportModal.openOrClose();
    //     this.$refs.refQcReportModal.getTaskDetails(item, "parent");
    //   }
    // },
    // 下载产品
    downloadTaskResult(item) {
      if (item.taskType == 2) {
        let path = this.$api.taskManageApi.getTaskProductFile + item.id;
        let param = { userName: this.userName };
        this.http.get(path, param).then((res) => {
          if (res.data.code == 0) {
            let data = res.data.data;
            let filePath = data.isFile ? data.file : data.file + "/";
            let url =
              "DownloadFile://" +
                sessionStorage.getItem("PIECloud-Token") +
              "/" +
              this.userName +
              "/" +
              filePath +
              "/";
            if (data.isUserFile) {
              let r = window.confirm("暂无影像产品数据,是否跳转根目录？");
              if (r) {
                this.$$openDownLoadFile(url);
              }
            } else {
              this.$$openDownLoadFile(url);
            }
          } else {
            this.$Message.error(res.data.message);
          }
        });
      } else {
        //质量检查详情
        this.$refs.refQcReportModal.openOrClose();
        this.$refs.refQcReportModal.getTaskDetails(item, "parent");
      }
    },
    //提取文件夹里面所有的文件
    getNewTreeData(data) {
      let _this = this;
      let result = [];
      for (let i = 0; i < data.length; i++) {
        let tempItem = data[i];
        let item = {};
        item.expand = tempItem.expand;
        item.path = tempItem.path;
        item.title = tempItem.title;
        item.type = tempItem.type;
        item.children = [];
        result.push(item);

        if (tempItem.type == "folder" && tempItem.children) {
          let list = [];
          _this.recursiveTreeFile(tempItem.children, list);
          item.children = list;
        }
      }
      return result;
    },

    recursiveTreeFile(data, list) {
      let _this = this;
      for (let i = 0; i < data.length; i++) {
        let tempItem = data[i];
        if (tempItem.type == "file") {
          list.push(tempItem);
        }
        if (tempItem.type == "folder" && tempItem.children) {
          _this.recursiveTreeFile(tempItem.children, list);
        }
      }
      return list;
    },
    downLoadProduct() {
      let that = this;
      if (this.productpath == null || this.productpath == "") {
        this.$Message.warning("请选择下载的产品文件");
      } else {
        let data = {
          path: this.$api.taskManageApi.isExit,
          params: {
            username: this.$store.state.user.userName,
            path: this.productpath,
            // path:"/pie/data/247/sthx_user_data/pieadmin/lilintest/123/GF3_KAS_QPSI_010970_E81.2_N40.5_20180910_L1A_VH_L10003442728.tif" //测试地址
            // path:
            //   "/pie/data/user/nwsj/11-SJCLXT/SJCL/user/pieadmin/xyz/workflow.log",
          },
        };

        let fun = function () {
          let url =
            "DownloadFile://" +
              sessionStorage.getItem("PIECloud-Token") +
            "/" +
            data.params.username +
            "/" +
            data.params.path +
            "/";
          console.log("客户端url：", url);
          window.location.href = url;
        };
        this.$$downLoadFile(data, fun);

        //以前的下载方式
        /*  let newarr = [];
              newarr.push(this.productpath);
              let path = this.$api.taskManageApi.downloadReport + newarr;
              window.open(path);*/
      }
    },

    //删除
    delCancel() {
      this.delShow = false;
      this.showdownLoad = false;
    },

    pageSizeChange(val) {
      this.pageSize = val;
    },
    currentPageChange(val) {
      this.pageNum = val;
    },

    initParam(data) {
      this.pageNum = data.pageNum;
      this.pageSize = data.pageSize;
      this.status = data.status;
      this.priority = data.priority;
      this.startTime = data.startTime;
      this.endTime = data.endTime;
      this.groupName = data.name;
      this.tag = data.tag;
    },
    //查询所有流程
 
    getInfo(val) {
      String.prototype.replaceAll = function (s1, s2) {
        return this.replace(new RegExp(s1, "gm"), s2);
      };

      let userLink =
        `/taskManage/allTask/${val.id}/${val.groupTaskName.replaceAll(
          "/",
          "*"
        )}` +
        "?" +
        val.number;
      this.$router.push({
        path: userLink,
        query: {
          pageNum: this.pageNum,
          from: "optimizationTask",
          taskType: val.taskType,
        },
      });
    },
    getTaskDetails(item) {
      if (item.taskType == 2) {
        this.$router.push({
          path: "/processing",
          query: {
            from: "taskLook",
            id: item.id,
            status: item.status,
          },
        });
      } else {
        this.$Message.info("这是质检任务！");
        //  this.$refs.refQcReportModal.openOrClose();
        // this.$refs.refQcReportModal.getTaskDetails(item, "parent");
      }
    },

    //暂停
    pause(val) {
      this.pauseShow = true;
      this.clickId = val.id;
    },
    pauseCancel() {
      this.pauseShow = false;
    },
    pauseOk() {
      let _this = this;
      _this.pauseShow = false;
      let statusName = "PAUSED";
      let path = this.$api.taskManageApi.updateStatus + "/" + this.clickId;
      let param = {
        statusName: statusName,
      };
      this.http.put(path, param).then((res) => {
        _this.loading = false;
        if (res.data.code == 0) {
          this.$Message.success("提交任务成功");
          this.$bus.$emit("getTaskCatalog");
          _this.loadContentMethod({ row: _this.crountTaskBuild });
        } else {
          this.$Message.error("状态更改失败");
        }
      });
    },

    //恢复
    restore(val) {
      this.restoreShow = true;
      this.clickId = val.id;
    },
    restoreCancel() {
      this.restoreShow = false;
    },
    restoreOk() {
      let _this = this;
      this.restoreShow = false;
      let statusName = "RESUME";
      let path = this.$api.taskManageApi.updateStatus + "/" + this.clickId;
      let param = {
        statusName: statusName,
      };
      this.http.put(path, param).then((res) => {
        _this.loading = false;
        if (res.data.code == 0) {
          this.$Message.success("提交任务成功");
          _this.loadContentMethod({ row: _this.crountTaskBuild });
        } else {
          this.$Message.error("状态更改失败");
        }
      });
    },

    //停止
    stop(val) {
      this.stopShow = true;
      this.clickId = val.id;
    },
    stopCancel() {
      this.stopShow = false;
    },
    stopOk() {
      let _this = this;
      this.stopShow = false;
      let statusName = "STOP";

      let path = this.$api.taskManageApi.updateStatus + "/" + this.clickId;
      let param = {
        statusName: statusName,
      };
      this.http.put(path, param).then((res) => {
        _this.loading = false;
        if (res.data.code == 0) {
          this.$Message.success("提交任务成功");
          this.$bus.$emit("getTaskCatalog");
          _this.loadContentMethod({ row: _this.crountTaskBuild });
        } else {
          this.$Message.error("状态更改失败");
        }
      });
    },

    //重启
    reStart(val) {
      this.restartShow = true;
      this.clickId = val.id;
    },
    reStartCancel() {
      this.restartShow = false;
    },
    reStartOk() {
      let _this = this;
      this.restartShow = false;
      let statusName = "RESTART";
      let path = this.$api.taskManageApi.updateStatus + "/" + this.clickId;
      console.log("612restartOk", path);
      let param = {
        statusName: statusName,
      };
      this.http.put(path, param).then((res) => {
        _this.loading = false;
        if (res.data.code == 0) {
          this.$Message.success("提交任务成功");
          _this.loadContentMethod({ row: _this.crountTaskBuild });
        } else {
          this.$Message.error("状态更改失败");
        }
      });
    },

    del(val) {
      this.delShow = true;
      this.clickId = val.id;
    },
    delOk() {
      let _this = this;
      this.delShow = false;
      let path = this.$api.taskManageApi.delete + this.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.code == 0) {
          this.$Message.success("删除成功");
          this.$bus.$emit("getTaskCatalog");
          _this.loadContentMethod({ row: _this.crountTaskBuild });
        } else {
          this.$Message.error("删除失败");
        }
      });
    },

    //重试
    retry(val) {
      this.retryShow = true;
      this.clickId = val.id;
    },
    retryCancel() {
      this.retryShow = false;
    },
    retryOk() {
      let _this = this;
      this.retryShow = false;
      let statusName = "RETRY";

      let path = this.$api.taskManageApi.updateStatus + "/" + this.clickId;
      let param = {
        statusName: statusName,
      };
      this.http.put(path, param).then((res) => {
        _this.loading = false;
        if (res.data.code == 0) {
          this.$Message.success("提交任务成功");
          _this.loadContentMethod({ row: _this.crountTaskBuild });
        } else {
          this.$Message.error("状态更改失败");
        }
      });
    },

    selectTree() {
      let item = this.$refs.tree.getSelectedNodes()[0];
      if (!item) return;
      this.productpath = this.$refs.tree.getSelectedNodes()[0].path;
      if (item.type === "folder") {
        item.expand = !item.expand;
        item.selected = !item.selected;
        return;
      }

      this.downLoadProduct();
    },

    changePriority(data) {
      this.prioShow = true;
      this.priorityData.startWorkflowId = data.id;
    },
    prioCancel() {
      this.prioShow = false;
    },
    prioOk() {
      let _this = this;
      let url =
        this.$api.taskManageApi.updateTaskPriority +
        this.priorityData.priority +
        "/" +
        this.priorityData.startWorkflowId;
      this.http
        .put(url)
        .then((res) => {
          if (res.data.code == 0) {
            this.prioShow = false;
            this.$Message.success("修改成功");
            // 修改成功后 刷新右侧table
            _this.loadContentMethod({ row: _this.crountTaskBuild });
          } else {
            this.$Message.error(res.data.message);
          }
        })
        .catch((err) => {
          console.log("catch");
          this.prioShow = false;
          this.$Message.error("修改失败");
        });
    },

    /*    selectPriorityChange(event, item) {
            let _this = this;
            let priority = event.target.value;
            let startWorkflowId = item.id;

            let url =
                      _this.$api.taskManageApi.updateTaskPriority +
                      priority +
                      "/" +
                      startWorkflowId;

            this.http
                      .put(url)
                      .then((res) => {
                        if (res.data.code == 0) {
                          this.$Message.success("修改成功");
                          // 修改成功后 刷新右侧table
                          //   _this.loadContentMethod({row:_this.crountTaskBuild});
                        } else {
                          this.$Message.error(res.data.message);
                        }
                        // 修改后,不论成功与否，都刷新右侧table
                         _this.loadContentMethod({row:_this.crountTaskBuild});
                      })
                      .catch((err) => {
                        this.$Message.error("修改失败");
                      });
          },*/

    selectPriorityChange(event, item) {
      let _this = this;
      let priority = event.target.value;
      let startWorkflowId = item.id;


      let url =
        _this.$api.taskManageApi.updateTaskPriority +
        priority +
        "/" +
        startWorkflowId;
      this.http
        .put(url)
        .then((res) => {
          if (res.data.code == 0) {
            this.$Message.success("修改成功");
            // 修改成功后 刷新右侧table
            //   _this.loadContentMethod({row:_this.crountTaskBuild});
          } else {
            this.$Message.error(res.data.message);
          }
          // 修改后,不论成功与否，都刷新右侧table

          _this.loadContentMethod({ row: _this.crountTaskBuild });
        })
        .catch((err) => {
          this.$Message.error("修改失败");
        });
    },
    //换页
    handlePageChange2({ currentPage, pageSize }) {
      this.tablePage2.currentPage = currentPage;
      this.tablePage2.pageSize = pageSize;
      this.findList2();
    },
  },
  watch: {},
};
</script>


<style scoped>
.myCol {
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.myColPri {
  margin-right: 10px;
}
.myCol1 {
  margin-left: 0px;
}
.myColtemp {
  display: flex;
  align-items: center;
  margin-left: 5px;
  width: 33.3%;
}
.search {
  display: flex;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.76563rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  width: 50px;
}

.labelName {
  margin-right: 25px;
  margin-bottom: 0px;
}
.m_radio_group {
  height: 21px;
  margin-top: -9px;
}
.m_radio_group label {
  margin: 0;
  margin-right: 14px;
}
.btnStyle {
  padding: 0;
  margin: 0 3px;
}
.btnStyle:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.strongstyle {
  font-size: 18px;
}

.pickstyle {
  width: 58%;
}

.clean {
  margin-left: 10px;
  margin-right: 18px;
}
.listbtn {
  margin-left: 0px;
}
.deletestyle {
  width: 15px;
  height: 15px;
}
.page-link {
  cursor: pointer;
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: black;
}
.modal-header {
  display: flex;
  justify-content: flex-start;
}
.threePart,
.secondPart {
  display: flex;
  justify-content: space-between;
  margin-left: 0;
}
.layout {
  width: 33.3%;
}
.searchRight {
  width: 18%;
}
.searchRight > .btnstyle1 {
  position: absolute;
  right: 2%;
}
/* 用以调整表格位置 */
.tablePosition {
  overflow-y: auto;
  height: calc(100% - 158px);
}
.rowstyle {
  margin-bottom: 0;
}

.tempxyz /deep/.card-footer {
  bottom: 12px;
}

/deep/.page-item.active .page-link {
  background-color: #3c6ef0;
}

/deep/.form-control {
  padding: 0 !important;
}
</style>
<style>
.cardstyle {
  margin: 10px 0;
}
.tempxyz .card-body {
  overflow-y: auto;
  padding: 20px 20px;
  bottom: 0;
  /* height: calc(100% - 52px) !important; */
}

.tablePosition > div {
  height: 100% !important;
  width: 100% !important;
  border: 1px solid #d8dbe0;
  border-left: 0;
  border-right: 0;
}

.table {
  margin-bottom: 0;
}

.table th {
  border-top: 0;
}
.onButton:hover {
  color: white;
}
</style>


<!--

<template>
    <div class="box">
        &lt;!&ndash;   colortempstyle  &ndash;&gt;
        <div id="dqmap" ref="themap" style="height: calc(100vh - 80px)"></div>
        &lt;!&ndash;左侧抽屉&ndash;&gt;
        <Drawer
                placement="left"
                v-model="leftDrawer"
                :mask="false"
                :mask-closable="false"
                :draggable="true"
                :transfer="false"
                width="380"
                :inner="true"
        >
            &lt;!&ndash;头部&ndash;&gt;
            <template slot="header">
                <div class="leftDrawerHead">
                    <div class="headLeft">
                        <i
                                class="fa fa-search-plus colortempstyle"
                                style="margin-right: 5px"
                                aria-hidden="true"
                        ></i>
                        <h6 class="colortempstyle">查询条件</h6>
                    </div>
                    <div class="headRight">
                        &lt;!&ndash; <i-switch :value="selectOPen" size="large">
                                        <span slot="open">优选</span>
                                        <span slot="close">关闭</span>
                                    </i-switch>&ndash;&gt;
                        <Button type="primary" size="small" @click="searchList"
                        >查询</Button
                        >
                    </div>
                </div>
            </template>
            &lt;!&ndash;体&ndash;&gt;
            <div>
                &lt;!&ndash;tab切换&ndash;&gt;
                <Tabs value="TabName1" size="small" v-model="tabValue">
                    <TabPane label="行政区域" name="a" class="selectCity">
                        <Form :model="selectCity" :label-width="80">
                            <FormItem label="区域选择：" class="rrCity">
                                <Cascader
                                        size="small"
                                        v-model="selectCity.city"
                                        :data="cityData"
                                        change-on-select
                                        :load-data="loadData"
                                        @on-change="handleChangeCity"
                                ></Cascader>
                            </FormItem>
                        </Form>
                    </TabPane>
                    <TabPane label="预定义区域" name="b">
                        <Form :model="reserveCity" :label-width="75">
                            <FormItem label="区域类型：">
                                <Select size="small" v-model="reserveCity.type">
                                    <template v-for="item in areaData">
                                        <Option
                                                :value="item.value"
                                                :key="item.label"
                                                :disabled="item.disabled"
                                        >{{ item.label }}</Option
                                        >
                                    </template>
                                </Select>
                            </FormItem>
                            <FormItem label="区域名称：">
                                <Select
                                        size="small"
                                        v-model="reserveCity.name"
                                        @on-change="handleChangePreRegion"
                                >
                                    <template v-for="item in areaDataCom">
                                        <Option :value="item.distcode" :key="item.name">{{
                                            item.name
                                            }}</Option>
                                    </template>
                                </Select>
                            </FormItem>
                        </Form>
                    </TabPane>
                    <TabPane label="经纬度" name="c">
                        <Form :model="latitudeLongitude" :label-width="75">
                            <div style="display: flex">
                                <FormItem label="左上经度：">
                                    <InputNumber
                                            size="small"
                                            :max="360"
                                            :min="0"
                                            :step="0.001"
                                            v-model="latitudeLongitude.leftTopLat"
                                    ></InputNumber>
                                </FormItem>
                                <FormItem label="左上维度：">
                                    <InputNumber
                                            size="small"
                                            :max="90"
                                            :min="0"
                                            :step="0.001"
                                            v-model="latitudeLongitude.leftTopLong"
                                    ></InputNumber>
                                </FormItem>
                            </div>
                            <div style="display: flex">
                                <FormItem label="右下经度：">
                                    <InputNumber
                                            size="small"
                                            :max="360"
                                            :min="0"
                                            :step="0.001"
                                            v-model="latitudeLongitude.rightBottomLat"
                                    ></InputNumber>
                                </FormItem>
                                <FormItem label="右下维度：">
                                    <InputNumber
                                            size="small"
                                            :max="90"
                                            :min="0"
                                            :step="0.001"
                                            v-model="latitudeLongitude.rightBottomLong"
                                    ></InputNumber>
                                </FormItem>
                            </div>
                            <FormItem>
                                <Button size="small" type="primary">定位</Button>
                                <Button size="small" style="margin-left: 8px">转度分秒</Button>
                            </FormItem>
                        </Form>
                    </TabPane>
                    &lt;!&ndash;<TabPane label="上传shp" name="d">
                                  <Upload action="#">
                                      <Button size="small" icon="ios-cloud-upload-outline">点击上传</Button>
                                  </Upload>
                                  <div style="margin-top: 15px;display: flex;flex-direction: column">
                                      <span>1. 仅支持单要素的zip压缩包</span>
                                      <span>2. 至少包括.shp,.shx,.prj,.dbf,.sbn,.sbx文件</span>
                                      <span>1. WGS-84坐标系</span>
                                  </div>
                              </TabPane>&ndash;&gt;
                </Tabs>
                &lt;!&ndash;form表单&ndash;&gt;
                <Form :model="formData" :label-width="80">
                    <FormItem label="开始时间：">
                        <DatePicker
                                v-model="formData.startTime"
                                size="small"
                                type="date"
                                placement="bottom-end"
                                placeholder="请选择开始时间"
                                format="yyyy-MM-dd"
                        ></DatePicker>
                    </FormItem>
                    <FormItem label="结束时间：">
                        <DatePicker
                                v-model="formData.endTime"
                                size="small"
                                type="date"
                                placement="bottom-end"
                                placeholder="请选择结束时间"
                                format="yyyy-MM-dd"
                        ></DatePicker>
                    </FormItem>
                    <FormItem label="云量：">
                        <Slider
                                size="small"
                                v-model="formData.cloudiness"
                                show-input
                        ></Slider>
                    </FormItem>
                    <FormItem label="分辨率：" class="CheckboxGroup">
                        <CheckboxGroup v-model="resolving">
                            <Checkbox label="1米"></Checkbox>
                            <Checkbox label="2米"></Checkbox>
                            <Checkbox label="16米"></Checkbox>
                        </CheckboxGroup>
                        <div>
                            <=
                            <InputNumber
                                    :min="1"
                                    :step="1"
                                    size="small"
                                    v-model="formData.resolvingPower"
                            ></InputNumber
                            >米
                        </div>
                    </FormItem>

                    <FormItem label="优选规则：">
                        <draggable v-model="dragSortDdata"  class="selectOp ">
                            <template v-for="(item) in dragSortDdata">
                                <div :key="item.name">
                                    <Checkbox v-model="item.select"  v-if="item.name==='cloudpercent'||item.name==='imagegsd'" >{{item.alisaName}}</Checkbox>
                                    <Poptip placement="bottom" width="300"  v-if="item.name==='orbitid'||item.name==='scenetime'" trigger="hover" :transfer="true" >
                                        <Checkbox  v-model="item.select">{{item.alisaName}}</Checkbox>
                                        <div class="api" slot="content" v-if="item.name==='orbitid'" >
                                            <Input v-model="item.value" size="small" placeholder="请输入轨道号,例:10/20" />
                                        </div>
                                        <div class="api" slot="content" v-if="item.name==='scenetime'" >
                                            <CheckboxGroup v-model="item.value">
                                                <template v-for="item in mounths">
                                                    <Checkbox :label="item" :key="item+'yue'" >{{item+"月"}}</Checkbox>
                                                </template>
                                            </CheckboxGroup>
                                        </div>
                                    </Poptip>
                                </div>
                            </template>
                        </draggable>
                    </FormItem>
                    &lt;!&ndash; <FormItem label="生产人员：" >
                                  <Input size="small" disabled   />
                              </FormItem>
                              <FormItem label="质量等级：">
                                  <InputNumber  size="small"></InputNumber> - <InputNumber  size="small"></InputNumber>
                              </FormItem>&ndash;&gt;
                </Form>




                <Collapse>
                    <template v-for="(item, index) in collapseList">
                        <Panel :key="index">
                            <div
                                    slot
                                    style="
                  display: flex;
                  justify-content: space-between;
                  width: 100%;
                "
                            >
                                <strong>{{ item.title }}</strong
                                >&lt;!&ndash;标题&ndash;&gt;
                                <div>
                                    <Checkbox @on-change="changeTitle($event, item)"></Checkbox>
                                </div>
                            </div>
                            <div slot="content">
                                <template v-for="(itemChild) in item.children">
                                    <div
                                            slot
                                            style="
                      display: flex;
                      justify-content: space-between;
                      width: 100%;
                    "
                                            :key="itemChild.name "
                                    >
                                        <strong>{{ itemChild.name }}</strong>
                                        &lt;!&ndash;卫星&ndash;&gt;
                                        <div>
                                            <Checkbox
                                                    @on-change="changeSing($event, itemChild)"
                                            ></Checkbox>
                                        </div>
                                    </div>
                                    &lt;!&ndash;    <CheckboxGroup @on-change="changeChe">&ndash;&gt;
                                    <template
                                            v-for="(itemChildI, indexChildI) in itemChild.sensor"
                                    >
                                        <Checkbox
                                                :key="indexChildI.id"
                                                @on-change="changeChe($event, itemChildI)"
                                                :value="itemChildI.checked"
                                        >{{ itemChildI.name }}</Checkbox
                                        >
                                        &lt;!&ndash; itemChildI.tip ? itemChildI.tip : itemChildI.name &ndash;&gt;
                                        &lt;!&ndash;传感器&ndash;&gt;
                                    </template>
                                    &lt;!&ndash;  </CheckboxGroup>&ndash;&gt;
                                </template>
                            </div>
                        </Panel>
                    </template>
                </Collapse>
            </div>


            &lt;!&ndash;收起按钮&ndash;&gt;
            <div
                    class="rightDrawerButton drawerHiddernLeftButton"
                    @click="leftDrawer = false"
            >
                <i class="fa fa-chevron-left"></i>
            </div>
        </Drawer>
        &lt;!&ndash;右侧抽屉&ndash;&gt;
        <Drawer
                title="Basic Drawer"
                :closable="true"
                v-model="rightDrawer"
                :mask="false"
                :mask-closable="false"
                :draggable="true"
                :transfer="false"
                width="340"
                :inner="true"
        >
            <template slot="header">
                <div class="leftDrawerHead">
                    <div class="headLeft">
                        <i
                                class="fa fa-search-plus colortempstyle"
                                style="margin-right: 5px"
                                aria-hidden="true"
                        ></i>
                        <h6 class="colortempstyle">查询结果</h6>
                    </div>
                    <div class="headRight">
                        <Button size="small" type="primary" @click="clearTableList"
                        >清除结果</Button
                        >
                        <Button
                                size="small"
                                type="primary"
                                style="margin-left: 5px"
                                @click="setUpMerthon"
                        >创建任务</Button
                        >
                    </div>
                </div>
            </template>
            <div>
                <Tabs value="name1" style="height: 500px">
                    <TabPane label="查询列表" name="name1">
                        &lt;!&ndash; <TableList
                          ref="table"
                          :getColumn="getColumns"
                          :getAxios="getAxios"
                          :pageSizeBig="true"
                          selection
                          :pageSize="50"
                          :index="false"
                          :selectRow.sync="selectRow"
                          :countSelectShow="true"
                          onlyItemData="dataid"
                          @currentChange="currentChange"
                        >
                        </TableList
                      > &ndash;&gt;
                        <Table
                                border
                                ref="selection"
                                :ellipsis="true"
                                :columns="getColumns"
                                :data="queryDataList"
                                @on-selection-change="selectData"
                        ></Table>
                    </TabPane>
                    <TabPane label="优选列表" name="name2">
                        <Table
                                border
                                ref="selection1"
                                :columns="getColumn"
                                :data="selectRow"
                        ></Table
                        ></TabPane>
                </Tabs>
            </div>
            <div
                    class="leftDrawerButton drawerHiddernRightButton"
                    @click="rightDrawer = false"
            >
                <i class="fa fa-chevron-right"></i>
            </div>
        </Drawer>
        &lt;!&ndash;控制抽屉的左右按钮&ndash;&gt;
        <div>
            <div class="leftDrawerButton" @click="leftDrawer = true">
                <i class="fa fa-chevron-right"></i>
            </div>
            <div class="rightDrawerButton" @click="rightDrawer = true">
                <i class="fa fa-chevron-left"></i>
            </div>
        </div>

        <Modal
                v-model="addShow"
                draggable
                scrollable
                width=600
                title="创建任务"
                style="addStyle"
        >
            <p slot="header" class="modalHeader">
                <span style="margin-left: 5px">创建任务</span>
            </p>
            <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="120">
                <FormItem label="任务类型" prop="type">
                    <RadioGroup v-model="formCustom.type">
                        <Radio :label="0">单次任务</Radio>
                        <Radio :label="1">任务集任务</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="任务集名称"   v-if="formCustom.type===1">
                    <Select v-model="formCustom.taskSetId">
                        <Option v-for="item in taskSetList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>

                <FormItem label="任务类型" prop="productType">
                    <Select v-model="formCustom.productType">
                        <Option v-for="item in getAllChildByDictCode" :value="item.dictCode" :key="item.id">{{ item.dictName }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="输出路径" prop="outFile">
                    <Input v-model="formCustom.outFile"  placeholder="请选择扫描路径" search enter-button="选择目录"  @on-search="openSelectTree"   />
                </FormItem>
                <FormItem label="创建人员" prop="taskOwner">
                    <Input disabled type="text" v-model="formCustom.taskOwner"></Input>
                </FormItem>
                <FormItem label="创建人部门" prop="department">
                    <Input disabled type="text" v-model="formCustom.department"></Input>
                </FormItem>
            </Form>
            <template #footer class="footerBtns">
                <CButton @click="addShow = false" color="info" class="cancel-btn"
                >取消</CButton
                >
                <CButton @click="commitOk" color="info" class="system-btn-style"
                >确定</CButton
                >
            </template>
        </Modal>

        <file-catalog
                ref="refFileCatalogModal"
                :modalShow="fileCatalogModal"
                v-if="fileCatalogModal"
                @closed="fileCatalogModalClose"
                @menuOk="fileCatalogModalOk"
        ></file-catalog>
    </div>
</template>

<script>

    import draggable from "vuedraggable";
    import fileCatalog from "../jobProcess/fileCatalog";
    /*import TableList from "../../template/table/TableList";*/
    import { collapseList, satelliteLinkage, formDataList } from "./commons";
    export default {
        name: "optimizationBuild",
        components: { fileCatalog, draggable },
        data() {
            return {
                lastDataIdList: [],
                //查询结果要素集范围列表
                queryGeoJsonList: {
                    type: "FeatureCollection",
                    features: [],
                },
                //优选列表要素集范围列表
                _filterGeoJsonList: {
                    type: "FeatureCollection",
                    features: [],
                },
                // 左侧抽屉
                leftDrawer: true,
                // 右侧抽屉
                rightDrawer: true,
                //弹框
                addShow: false,

                /*tab区域*/
                tabValue: "a",
                // 区域
                selectCity: {
                    city: [],
                },
                cityData: [],

                //预定义区域
                reserveCity: {
                    type: "",
                    name: "",
                },

                areaData: [
                    // {label: '行政区划', value: '-1'},
                    { label: "重点区域", value: "0" },
                    { label: "重点流域", value: "1" },
                    { label: "陆域红线边界", value: "2", disabled: true },
                    { label: "海域红线边界", value: "3", disabled: true },
                    { label: "国家公园", value: "4" },
                    { label: "国家级自然保护区", value: "5" },
                    { label: "省级自然保护区", value: "6" },
                    { label: "重点生态功能区", value: "7" },
                    { label: "生态文明示范创建与两山基地", value: "8", disabled: true },
                    { label: "生物多样性保护优先区", value: "9" },
                    { label: "海域红线", value: "10" },
                    { label: "海域", value: "11" },
                ],
                areaDataCom: [],
                // 经纬度
                latitudeLongitude: {
                    leftTopLat: 0,
                    rightBottomLat: 0,
                    leftTopLong: 0,
                    rightBottomLong: 0,
                },
                /*表单区域*/
                resolving: [],
                dragSortDdata: [
                    {
                        alisaName: "云量",
                        name: "cloudpercent",
                        select: false,
                    },
                    {
                        alisaName: "空间分辨率",
                        name: "imagegsd",
                        select: false,
                    },
                    {
                        alisaName: "轨道编号",
                        name: "orbitid",
                        select: false,
                        value: "",
                    },
                    {
                        alisaName: "采集时间",
                        name: "scenetime",
                        select: false,
                        value: [2, 5, 7],
                    },
                ],
                mounths:[1,2,3,4,5,6,7,8,9,10,11,12],

                formData: {
                    startTime: "",
                    endTime: "",
                    cloudiness: 0,
                    resolvingPower: 0,
                },
                formDataList: formDataList,
                collapseList: collapseList,
                selectSenior: new Set(),
                tableDataId: new Set(),
                /*右侧表格*/
                getColumns: [
                    {
                        type: "selection",
                        width: 60,
                        align: "center",
                    },
                    {
                        key: "satelliteid",
                        title: "卫星",
                        align: "center",

                        minWidth: 80,
                        maxWidth: "auto",
                    },
                    {
                        key: "sensorid",
                        title: "传感器",

                        minWidth: 80,
                        maxWidth: "auto",
                    },
                    {
                        key: "datatypename",
                        title: "数据类型",
                        align: "center",

                        minWidth: 80,
                        maxWidth: "auto",
                    },
                    {
                        key: "dataunit",
                        title: "数据单元",
                        align: "center",

                        minWidth: 80,
                        maxWidth: "auto",
                    },
                    {
                        key: "productformat",
                        title: "产品格式",
                        align: "center",

                        minWidth: 80,
                        maxWidth: "auto",
                    },
                    {
                        key: "productlevel",
                        title: "产品级别",
                        align: "center",

                        minWidth: 80,
                        maxWidth: "auto",
                    },
                    /* {
                                    key: "dataname",
                                    title: "数据名称",
                                    align: "center",
                                    width: "80",
                                },*/
                ],
                getColumn: [
                    {
                        key: "satelliteid",
                        title: "卫星",
                        align: "center",

                        minWidth: 80,
                        maxWidth: "auto",
                    },
                    {
                        key: "sensorid",
                        title: "传感器",

                        minWidth: 80,
                        maxWidth: "auto",
                    },
                    {
                        key: "datatypename",
                        title: "数据类型",
                        align: "center",

                        minWidth: 80,
                        maxWidth: "auto",
                    },
                    {
                        key: "dataunit",
                        title: "数据单元",
                        align: "center",

                        minWidth: 80,
                        maxWidth: "auto",
                    },
                    {
                        key: "productformat",
                        title: "产品格式",
                        align: "center",

                        minWidth: 80,
                        maxWidth: "auto",
                    },
                    {
                        key: "productlevel",
                        title: "产品级别",
                        align: "center",

                        minWidth: 80,
                        maxWidth: "auto",
                    },
                    /* {
                                    key: "dataname",
                                    title: "数据名称",
                                    align: "center",
                                    width: "80",
                                },*/
                ],
                queryDataList: [],
                selectRow: [],
                /* getAxios: {
                   url: this.$api.dataOptimizationApi.queryDataScheme, //请求路径
                   method: "get", //请求方式
                   firstRequest: false,
                   dataList: {}, //请求参数
                 },*/
                /*地图*/
                map: {},



                /*创建任务*/
                formCustom: {
                    type: 0,
                    taskSetId: '',
                    productType: '',
                    outFile:"",
                    taskOwner: this.$store.state.user.userName,
                    department:this.$store.state.user.department,
                    dataInfos: [],
                },

                ruleCustom: {
                    taskSetId: [
                        { required: false, message: '请输入任务集名称', trigger: 'blur' }
                    ],
                    productType: [
                        {required: false, message: '请输入任务集编码', trigger: 'blur' }
                    ],
                    outFile: [
                        {required: false, message: '请输入任务集编码', trigger: 'blur' }
                    ],
                },


                taskSetList: [],
                getAllChildByDictCode: [],
                fileCatalogModal: false



            };
        },
        computed: {},
        mounted() {
            this.initMap();
            this.getQueryArea();
        },
        methods: {
            /*地图*/
            initMap() {
                this.map = new mapboxgl.Map({
                    container: "dqmap", // container id
                    // style:
                    //   "http://121.36.21.73:20002/api/pie-cloud/layerData/layerTemplates?id=2c92808c71bafa7a01720c80d12f010c&key=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbmZvIjoie1widXNlcklkXCI6XCIxMDFcIixcImtleVwiOlwiOTBjNGI5NDI0N2FiMThmYmRiZTMyZDc4NzBkMTVjN2JcIn0ifQ.ifWlOcwmtenARlro-tf9hdLDlXjmbIa2T5AwSvRQB-M",
                    style: "./static/map/map.json",
                    // simple, //四维地球
                    // "http://121.36.21.73:20002/api/pie-cloud/layerData/layerTemplates?id=2c92808c71bafa7a01720c80d12f010c&key=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbmZvIjoie1widXNlcklkXCI6XCIxMDFcIixcImtleVwiOlwiOTBjNGI5NDI0N2FiMThmYmRiZTMyZDc4NzBkMTVjN2JcIn0ifQ.ifWlOcwmtenARlro-tf9hdLDlXjmbIa2T5AwSvRQB-M", // stylesheet location
                    center: [96.4, 34.5],
                    zoom: 3, // starting zoom
                    minZoom: 3,
                    epsg: 3857,

                    attributionControl: true,
                    doubleClickZoom: false,
                });
                this.map.addControl(new mapboxgl.FullscreenControl());
                var scale = new mapboxgl.ScaleControl({
                    maxWidth: 80,
                    unit: "metric",
                });
                this.map.addControl(scale);
                // this.map.on("load", () => {
                //   this.routerAfter();
                // });
            },

            //查询列表表格选中和取消事件
            queryTableSelectEvent(selevtion, row) {

                this.map.setFilter("greenLineLayer", [
                    "!=",
                    ["get", "dataid"],
                    row.dataid,
                ]);
            },
            //查询列表表格选中和取消事件
            queryTableSelectCancelEvent(selection, row) {

                this.map.setFilter("greenLineLayer", [
                    "==",
                    ["get", "dataid"],
                    row.dataid,
                ]);
            },

            currentChange(newROW, oldRow) {
                console.log(newROW);
                console.log(oldRow);
            },

            handleChangePreRegion(value, selectedData) {
                this.handleChangeCity([value], selectedData);
            },
            handleChangeCity(value, selectedData) {
                let path = this.$api.dataOptimizationApi.getAreaGeometry;
                let param = {
                    code: value[value.length - 1],
                };

                this.http.get(path, param).then((res) => {
                    if (res.data.success) {
                        let geometry = res.data.data.geom;
                        this.drawGeometry(geometry);
                    } else {
                        this.$Message.error(res.data.message);
                    }
                });
            },
            // 绘制区域矢量范围
            drawGeometry(geometry) {
                let _this = this;
                geometry = JSON.parse(geometry);
                if (!geometry) {
                    _this.resetMap();
                }
                if (_this.map.getSource("maine1") != null) {
                    _this.map.getSource("maine1").setData(geometry);
                } else {
                    _this.map.addSource("maine1", {
                        type: "geojson",
                        data: {
                            type: "Feature",
                            geometry: geometry,
                        },
                    });

                    _this.map.addLayer({
                        id: "area1",
                        type: "fill",
                        source: "maine1",
                        layout: {},
                        paint: {
                            "fill-color": "#088",
                            "fill-opacity": 0.8,
                        },
                    });
                }
                this.showToCenter(geometry.coordinates);
            },
            //缩放至图层
            showToCenter(coordinates) {
                let _this = this;
                // 计算 并 移动到中心点
                let minGlobalX = 180,
                    minGlobalY = 90,
                    maxGlobalX = -180,
                    maxGlobalY = -90;

                for (let i = 0; i < coordinates.length; i++) {
                    let tempData = coordinates[i];
                    if (tempData.length < 1) continue;
                    tempData.forEach((element) => {
                        if (element.length > 2) {
                            //多面
                            element.forEach((ele) => {
                                if (minGlobalX > parseFloat(ele[0])) {
                                    minGlobalX = parseFloat(ele[0]);
                                }
                                if (maxGlobalX < parseFloat(ele[0])) {
                                    maxGlobalX = parseFloat(ele[0]);
                                }
                                if (minGlobalY > parseFloat(ele[1])) {
                                    minGlobalY = parseFloat(ele[1]);
                                }
                                if (maxGlobalY < parseFloat(ele[1])) {
                                    maxGlobalY = parseFloat(ele[1]);
                                }
                            });
                        } else {
                            if (minGlobalX > parseFloat(element[0])) {
                                minGlobalX = parseFloat(element[0]);
                            }
                            if (maxGlobalX < parseFloat(element[0])) {
                                maxGlobalX = parseFloat(element[0]);
                            }
                            if (minGlobalY > parseFloat(element[1])) {
                                minGlobalY = parseFloat(element[1]);
                            }
                            if (maxGlobalY < parseFloat(element[1])) {
                                maxGlobalY = parseFloat(element[1]);
                            }
                        }
                    });
                }

                let centerGlobalX = 0;
                let centerGlobalY = 0;
                if (maxGlobalX === -180 && minGlobalX === 180) {
                    centerGlobalX = 116.4;
                    centerGlobalY = 39.9;
                } else {
                    centerGlobalX = (minGlobalX + maxGlobalX) / 2;
                    centerGlobalY = (minGlobalY + maxGlobalY) / 2;
                }

                let centermoddle = [];
                centermoddle.push(centerGlobalX);
                centermoddle.push(centerGlobalY);
                //视图范围比数据范围大20%
                let viewWidth = 0;
                let viewHeight = 0;
                if (maxGlobalX === -180 && minGlobalX === 180) {
                    viewWidth = (minGlobalX - maxGlobalX) * 0.8; //1.2
                    viewHeight = (minGlobalY - maxGlobalY) * 0.8;
                } else {
                    viewWidth = (maxGlobalX - minGlobalX) * 0.8;
                    viewHeight = (maxGlobalY - minGlobalY) * 0.8;
                }

                let ratio = Math.sqrt(Math.sqrt(Math.sqrt(2))); //2 //视图范围每扩大或缩小ratio倍，缩放等级对应减少或增加0.125

                let indexX = 6; // 6; //初始缩放等级为7
                let zoomBaseX = 5.96; //缩放等级为7时，经度范围为5.96
                if (viewWidth > zoomBaseX) {
                    //如果实际范围比基准范围大，基准范围按比例扩大，直至大于实际范围，获取此时缩放等级
                    while ((zoomBaseX = zoomBaseX * ratio) < viewWidth) {
                        indexX -= 0.125;
                    }
                } else {
                    //如果实际范围比基准范围小，基准范围按比例缩小，直至小于实际范围，获取此时缩放等级
                    while ((zoomBaseX = zoomBaseX / ratio) > viewWidth) {
                        indexX += 0.125;
                    }
                }

                let indexY = 6; //初始缩放等级为7
                let zoomBaseY = 1.91; //缩放等级为7时，纬度范围为1.91
                if (viewHeight > zoomBaseY) {
                    while ((zoomBaseY = zoomBaseY * ratio) < viewHeight) {
                        indexY -= 0.125;
                    }
                } else {
                    while ((zoomBaseY = zoomBaseY / ratio) > viewHeight) {
                        indexY += 0.125;
                    }
                }

                console.log("log", centermoddle.toString());
                //在经纬度分别获取的缩放等级中，获取比较小的值作为缩放等级，确保数据能完全显示
                let index = indexX < indexY ? indexX : indexY;
                _this.map.flyTo({
                    center: centermoddle,
                    zoom: index, // 缩放比例
                });
            },
            // 获取行政区域
            getQueryArea(type = 0, code = null, itemList, callback) {
                let that = this;

                let formdata = new FormData();
                formdata.set("type", type);
                formdata.set("code", code);
                this.http
                    .post(this.$api.dataOptimizationApi.queryArea, formdata)
                    .then((res) => {
                        if (res.data.success) {
                            res.data.data.data.forEach((item) => {
                                item.label = item.name;
                                item.value = item.code;
                                if (type !== 2) {
                                    item.children = [];
                                    item.loading = false;
                                }
                            });
                            if (itemList) {
                                itemList.loading = false;
                                itemList.children = res.data.data.data;
                                if (callback) {
                                    callback();
                                }
                            } else {
                                that.cityData = res.data.data.data;
                            }
                        } else {
                            this.$Message.error(res.data.message);
                        }
                    });
            },
            loadData(item, callback) {
                item.loading = true;
                if (item.__value) {
                    let data = item.__value.split(",").length;
                    if (data === 1) {
                        this.getQueryArea(1, item.code, item, callback);
                    }
                    if (data === 2) {
                        this.getQueryArea(2, item.code, item, callback);
                    }
                }
            },
            formListData(){
                let that = this;
                let formList = {};
                let string = "";
                this.selectSenior.forEach((item) => {string = string + item+","});
                this.formDataList[0].value[0] = that.formData.startTime? this.$moment(that.formData.startTime).format("YYYY-MM-DD"):"";
                this.formDataList[0].value[1] =that.formData.endTime?this.$moment(that.formData.endTime).format("YYYY-MM-DD"):"";
                this.formDataList[1].value = this.formData.cloudiness;
                this.formDataList[2].value = this.formData.resolvingPower;
                if (this.tabValue === "a") {formList.areaCode = this.selectCity.city[this.selectCity.city.length-1];}
                else if (this.tabValue === "b") {
                    let data = JSON.parse(JSON.stringify(this.reserveCity.name));
                    formList.areaCode =data.join(",")
                }
                else if (this.tabValue === "c") {
                    formList.wkt = `POLYGON((${this.latitudeLongitude.leftTopLat} ${this.latitudeLongitude.leftTopLong},${this.latitudeLongitude.leftTopLat} ${this.latitudeLongitude.rightBottomLong},${this.latitudeLongitude.rightBottomLat} ${this.latitudeLongitude.rightBottomLong},${this.latitudeLongitude.rightBottomLat} ${this.latitudeLongitude.leftTopLong},${this.latitudeLongitude.leftTopLat} ${this.latitudeLongitude.leftTopLong}))`;
                }
                let dragSortDdataArr = JSON.parse(JSON.stringify(this.dragSortDdata));
                formList.optimalRules = dragSortDdataArr.filter((item) => {
                    if (item.select) {
                        if (item.name === "orbitid") {
                            if (item.value && item.value.includes("/")) {
                                let numArr = [];
                                item.value.split("/").forEach((item) => {
                                    numArr.push(Number(item));
                                });
                                item.value = numArr;
                            } else {
                                this.$Message.warning("请正确输入轨道号");
                                return
                            }
                        }
                        return true;
                    }
                });
                formList.nodeId = string;

                formList.pageSize = 50;
                formList.fields = [];
                // formList.fields =  this.formDataList;
                return formList
            },
            // 搜索表格
            searchList() {
                let that = this;
                let param = that.formListData();
                let path = this.$api.dataOptimizationApi.queryDataScheme;
                this.http.post(path, param).then((res) => {
                    if (res.data.success) {
                        let tempData = res.data.data.data;
                        tempData.forEach((ele) => {
                            if (!this.tableDataId.has(ele.dataid)) {
                                this.tableDataId.add(ele.dataid);
                                that.queryDataList.push(ele);
                                that.selectRow.push(ele);
                            }
                        });
                        this.getFeatureGeoJson(that.queryDataList);
                        this.clearLineLayer();
                        this.drawLineLayer("greenLineLayer", this.queryGeoJsonList);
                    } else {
                        this.$Message.error(res.data.message);
                    }
                });
            },
            //get绘制线框的空间范围
            getFeatureGeoJson(data) {
                let _this = this;

                data.forEach((ele) => {
                    ele._checked = true; //默认设置勾选
                    let coordinates = JSON.parse(ele.shape).coordinates;
                    let _tempFeature = {
                        type: "Feature",
                        epsg: 3857,
                        properties: {
                            valuecolor: "#ff0000",
                            id: ele.dataid,
                        },
                        geometry: {
                            type: "Polygon",
                            coordinates: coordinates,
                        },
                    };
                    _this.queryGeoJsonList.features.push(_tempFeature);
                });
            },
            //绘制线图层
            drawLineLayer(id, geoJsonList) {
                let that = this;
                that.map.addSource(id, {
                    //原始影像边框
                    type: "geojson",
                    data: geoJsonList,
                });
                if (id === "redlineid") {
                    that.map.addLayer({
                        id: "RedLineId",
                        type: "line",
                        source: id,
                        layout: {},
                        paint: {
                            "line-color": "red",
                            "line-width": 1,
                            "line-opacity": 0.8,
                        },
                    });
                } else if (id === "greenLineLayer") {
                    that.map.addLayer({
                        id: "greenLineLayer",
                        type: "line",
                        source: id,

                        layout: {},
                        paint: {
                            "line-color": "blue",
                            "line-width": 1,
                            "line-opacity": 0.8,
                        },
                    });
                    // that.map.addLayer({
                    //   id: "greenLineLayer1",
                    //   type: "fill",
                    //   source: id,
                    //   layout: {},
                    //   paint: {
                    //     "fill-color": "#088",
                    //     "fill-opacity": 0.8,
                    //   },
                    // });
                }
            },
            clearLineLayer() {
                let that = this;
                let existLayer = that.map.getLayer("greenLineLayer");
                if (existLayer) {
                    that.map.removeLayer("greenLineLayer");
                }
                let existSource = that.map.getSource("greenLineLayer");
                if (existSource) {
                    that.map.removeSource("greenLineLayer");
                }
            },
            // 点击titile添加卫星
            changeTitle(data, list) {
                if (data) {
                    list.children.forEach((item) => {
                        item.sensor.forEach((itemChild) => {
                            this.$set(itemChild, "checked", true);
                            this.selectSenior.add(itemChild.id);
                        });
                    });
                } else {
                    list.children.forEach((item) => {
                        item.sensor.forEach((itemChild) => {
                            this.$set(itemChild, "checked", false);
                            this.selectSenior.delete(itemChild.id);
                        });
                    });
                }
            },
            //点击卫星添加卫星下的所有
            changeSing(data, list) {
                if (data) {
                    list.sensor.forEach((item) => {
                        this.$set(item, "checked", true);
                        this.selectSenior.add(item.id);
                    });
                } else {
                    list.sensor.forEach((item) => {
                        this.$set(item, "checked", false);
                        this.selectSenior.delete(item.id);
                    });
                }
            },
            // 点击单个向set中添加对象
            changeChe(data, list) {
                if (data) {
                    this.selectSenior.add(list.id);
                } else {
                    this.selectSenior.delete(list.id);
                }
            },

            selectData(data) {this.selectRow = data;},
            // 清除结果
            clearTableList(){
                this.selectRow = [];
                this.tableDataId.clear();
                this.queryDataList = [];
            },

            // 创建任务
            setUpMerthon() {
                /* this.addShow = true;*/
                if (!this.selectRow.length) {
                    this.$Message.warning("请选择要创建的任务");
                    return;
                } else {
                    this.addShow = true;
                    this.getTaskSetId();
                }
            },
            getTaskSetId(){
                let that = this;
                that.http.get(this.$api.manageApi.getAllTaskSet).then((res) => {
                    if (res.data.success) {
                        that.taskSetList = res.data.data.dataList;
                    } else {
                        that.$Message.error(res.data.message);
                    }
                });
                that.http.get(this.$api.manageApi.getAllChildByDictCode,{dictCode:"productType"}).then((res) => {
                    if (res.data.success) {
                        that.getAllChildByDictCode = res.data.data.dictCodeList;
                    } else {
                        that.$Message.error(res.data.message);
                    }
                });
            },
            // 打开选择树  文件操作
            openSelectTree() {
                let that = this;
                this.fileCatalogModal = true;
                this.$nextTick(()=>{
                    that.$refs.refFileCatalogModal.initFileTree({type:{name: "dir"}}, true);
                })
            },
            fileCatalogModalClose() {
                this.fileCatalogModal = false;
            },
            fileCatalogModalOk(data) {
                this.formCustom.outFile = data;
                this.fileCatalogModal = false;
            },
            commitOk() {
                let that = this;
                this.$refs["formCustom"].validate((valid) => {
                    if (valid) {
                        that.formCustom.dataInfos = [];
                        this.selectRow.forEach((item)=>{
                            let data = {};
                            data.dataId=item.dataid
                            data.inFileName=item.dataname
                            that.formCustom.dataInfos.push(data)
                        })
                        that.http.post(that.$api.dataOptimizationApi.optimizationTask, that.formCustom).then((res) => {
                            if (res.data.success) {
                                that.$Message.success(res.data.message);
                                that.addShow = false;
                            } else {
                                that.$Message.error(res.data.message);
                            }
                        });
                    } else {
                        that.$Message.error('请完整填写表单');
                    }
                })
            }



        },
        watch: {
            selectCity() {
                // 更新地图
            },

            "reserveCity.type": {
                handler(val, oldValue) {
                    let that = this;
                    this.http
                        .get(this.$api.dataOptimizationApi.getOtherDistrict, { type: val })
                        .then((res) => {
                            if (res.data.success) {
                                that.areaDataCom = res.data.data.data;
                            } else {
                                that.$Message.error(res.data.message);
                            }
                        })
                        .catch((err) => {
                            that.$Message.error(err.data.message);
                        });
                },
            },
            resolving(val, old) {
                let arr = [];
                val.forEach((item) => {
                    arr = arr.concat(satelliteLinkage[item]);
                });
                let ArrItem = new Set(arr);
                this.collapseList.forEach((item) => {
                    item.children.forEach((itemChildF) => {
                        itemChildF.sensor.forEach((itemChild) => {
                            if (ArrItem.has(itemChild.id)) {
                                this.$set(itemChild, "checked", true);
                                this.selectSenior.add(itemChild.id);
                            } else {
                                this.$set(itemChild, "checked", false);
                                this.selectSenior.delete(itemChild.id);
                            }
                        });
                    });
                });
            },

            "formCustom.type": {
                handler(val, oldValue) {
                    if (val === 0) {
                        this.formCustom.taskSetId = "";
                    }
                }
            }
        },
    };
</script>

<style scoped>
    /*左侧按钮*/
    .leftDrawerButton {
        position: absolute;
        left: 0;
        top: 44.5%;
        width: 12px;
        height: 40px;
        border: 1px solid #cccccc;
        background-color: white;
        line-height: 40px;
        border-radius: 0 3px 3px 0;
    }
    .rightDrawerButton {
        position: absolute;
        right: 0;
        top: 44.5%;
        width: 12px;
        height: 40px;
        border: 1px solid #cccccc;
        background-color: white;
        line-height: 40px;
        border-radius: 3px 0 0 3px;
    }

    .drawerHiddernLeftButton {
        position: absolute;
        right: 0;
        top: 44.5%;
    }
    .drawerHiddernRightButton {
        position: absolute;
        left: 0;
        top: 44.5%;
    }
    .headLeft {
        display: flex;
        align-items: center;
    }
    .headRight {
        margin-right: 30px;
    }
    .leftDrawerHead {
        display: flex;
        justify-content: space-between;
    }
    .selectOp {
        display: flex;

    }
    .delKuangBody{
        min-height: 100px;
        display: flex;
        align-items: center;
    }

    /deep/.ivu-collapse-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    /deep/.ivu-tabs {
        z-index: 100000000;
    }
    /deep/.ivu-tabs-bar {
        margin-bottom: 7px;
    }
    /deep/.ivu-form .ivu-form-item-label {
        padding: 10px 0 10px 0;
    }
    /deep/.ivu-drawer-content {
        background-color: rgba(255, 255, 255, 0.75) !important;
    }
    /deep/.ivu-drawer-body {
        overflow-x: hidden;
    }
    /deep/.ivu-tabs {
        overflow: inherit;
    }
    /deep/ .ivu-form-item {
        margin-bottom: 0;
    }

    /deep/.ivu-date-picker {
        width: 100%;
    }
    .CheckboxGroup /deep/.ivu-form-item-content {
        display: flex;
        flex-wrap: nowrap;
        margin-left: 0 !important;
    }

    .CheckboxGroup /deep/ .ivu-input-number-small {
        width: 55px;
    }
    /deep/.ivu-table-body,
    /deep/.ivu-table-wrapper-with-border {
        height: 100% !important;
        max-height: 100% !important;
    }
    /deep/.ivu-table-body,  /deep/.ivu-table-wrapper-with-border {
        height: 100% !important;
        max-height: 100% !important;
    }
    /*  /deep/.ivu-table-border td, .ivu-table-border th{
            background-color:rgba(255,255,255,0.75) !important;
        }*/

    /deep/.ivu-checkbox-group {
        display: flex;
        flex-wrap: wrap;
    }
    /deep/.card-footer{
        background-color: rgba(255,255,255,0);
    }
    /* #satellite /deep/.ivu-checkbox-wrapper {
      margin-right: 20px;
    } */
    .addStyle /deep/.ivu-form-item-label{
        padding-right: 10px;
    }
    .rrCity/deep/ .ivu-form-item-label{
        padding-top: 5px;
    }
</style>
-->
